<!-- p5.js动态背景 -->
<template>
<vue-p5 id="p5-bg" @sketch="sketch" />
</template>

<script>
import VueP5 from 'vue-p5'
import blobs from '@/assets/sketchs/blobs'
import waves from '@/assets/sketchs/waves'

export default {
  name: 'p5-background',
  components: { VueP5 },
  inject: ['reload'],
  props: {
    sketchType: String
  },
  computed: {
    sketch() {
      return this[this.sketchType]
    }
  },
  watch: {
    sketchType() {
      this.reload()
    }
  },
  methods: {
    blobs,
    waves
  }
}
</script>

<style lang="stylus">
#p5-bg
  position fixed
  top 0
  left 0
  width 100vw
  height 100vh
  z-index -1
</style>